<template>
  <div class="bgff p20">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="手机号码">
        <el-input v-model="form.phone" placeholder="请输入手机号码" clearable></el-input>
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select v-model="form.categoryId" placeholder="请选择" clearable>
          <el-option
            v-for="item in orderCategoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" @click="reset">重置刷新</el-button>
      </el-form-item>
      <el-form-item v-if="level==1 || level==2">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addWork">添加</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column
          type="index"
          width="50"
          :index="(index)=>{return (index+1) + (curPage - 1) * size }"
          label="序号"
        ></el-table-column>
        <el-table-column prop="orderCategory.name" label="工单类型" min-width="120"></el-table-column>
        <el-table-column prop="customerName" label="联系人" min-width="120"></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="150"></el-table-column>
        <el-table-column prop="province.name" label="区域名称" min-width="200">
          <template slot-scope="scope">
            {{scope.row.province?scope.row.province.name:''}}
            {{scope.row.city?scope.row.city.name:''}}
            {{scope.row.district?scope.row.district.name:''}}
          </template>
        </el-table-column>
        <el-table-column prop="dept.name" label="组织机构" min-width="150"></el-table-column>
        <el-table-column prop="status" label="流程状态" min-width="120">
          <template slot-scope="scope">{{statusModul[scope.row.status]}}</template>
        </el-table-column>
        <el-table-column prop="flowStatus" label="工作流节点" min-width="120">
          <template slot-scope="scope">{{flowStatusModulFn(scope.row)}}</template>
        </el-table-column>
        <el-table-column prop="mark" label="备注" min-width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160">
          <template
            slot-scope="scope"
          >{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <dotag :datarow="scope.row" :cur_this="cur_this"></dotag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt20"
        @current-change="handlePage"
        @size-change="handleSizeChange"
        :current-page.sync="curPage"
        :page-size="size"
        :page-sizes="[5,10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <addwork ref="obj" :cur_this="cur_this" :is_add="true"></addwork>
  </div>
</template>

<script>
import { _ordersList, _orderCategory } from "@/http/ajax";
import addwork from "./modul/addwork";
import dotag from "./modul/dotag";
export default {
  components: { addwork, dotag },
  name: "adduser",
  data() {
    return {
      statusModul: {
        0: "待接单",
        1: "执行中",
        2: "完成",
        3: "关闭",
        4: "拒单"
      },
      flowStatusModulFn: row => {
        if (row.status >= 1) {
          return {
            0: "未接单",
            1: "接单",
            2: "完成",
            3: "拒单"
          }[row.flowStatus];
        } else {
          return "-";
        }
      },
      level: sessionStorage.level,
      cur_this: this,
      loading: false,
      form: {
        phone: "",
        categoryId: ""
      },
      orderCategoryList: [],
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0
    };
  },
  created() {
    this.getList();
    this.getOrderCategory();
  },
  methods: {
    search() {
      if (!this.form.phone || this.form.phone.length == 11) {
        this.getList();
      } else {
        this.$message({
          message: "请输入正确的手机号",
          type: "warning"
        });
      }
    },
    reset() {
      this.form = {
        phone: "",
        categoryId: ""
      };
      this.tableData = [];
      this.curPage = 1;
      this.size = 10;
      this.total = 0;
      this.getList();
    },
    getOrderCategory() {
      _orderCategory(
        res => {
          this.orderCategoryList = res.content;
        },
        err => {}
      );
    },
    getList() {
      this.loading = true;
      this.tableData = [];
      let user = JSON.parse(sessionStorage.user);
      let data = {
        deptId: user.deptId || user.dept.id || "",
        level: sessionStorage.level,
        page: this.curPage - 1,
        size: this.size,
        sort: "id,desc"
      };
      Object.keys(this.form).forEach(key => {
        data[key] = this.form[key];
      });
      _ordersList(
        data,
        res => {
          setTimeout(() => {
            this.loading = false;
            this.tableData = res.content;
            this.total = res.totalElements;
          }, 400);
        },
        err => {
          this.loading = false;
        }
      );
    },
    addWork() {
      const _this = this.$refs.obj;
      _this.dialog = true;
      _this.domInit();
       _this.form = {
          customerName: "",
        categoryId: 1,
        phone: "",
        actionUid: '',
        address: "",
        mark: "",
        cityId: "",
        districtId: 0,
        deptId: '',
        status: 0,
        flowStatus: 0,
        equipment_id: 0
      };
    },
    // 切换页码
    handlePage(val) {
      this.tableData = [];
      this.curPage = val;
      this.getList();
    },
    // 切换条数
    handleSizeChange(val) {
      this.curPage = 1;
      this.size = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
